<template>
  <div class="home">
    <!--1.疫情图片-->
    <div class="logo">
      <img src="../assets/images/bannercity.png" width="100%" alt="">
      <p class="title"></p>
    </div>
    <!--2.疫情热点-->
    <CovInfo :news="news"/>
    <!-- 3.相关导航-->
    <div class="list">
      <div class="item">
        <router-link to="/riskarea">
          <img src="../assets/images/1.png" alt="">
          <div>风险地区</div>
        </router-link>
      </div>
      <div class="item">
        <router-link to="/Covtest">
          <img src="../assets/images/2.png" alt="">
          <div class="itemhot"></div>
          <div>核酸检测</div>
        </router-link>
      </div>
      <div class="item">
        <router-link to="/Prevention">
          <img src="../assets/images/3.png" alt="">
          <div>防疫物资</div>
        </router-link>
      </div>
      <div class="item">
        <router-link to="/Travel">
          <img src="../assets/images/4.png" alt="">
          <div>出行政策</div>
        </router-link>
      </div>
    </div>
    <!--4.疫情信息统计-->
    <Covnumber :covData="covData"/>
    <!--5.中国地图-->
    <Chainmap/>
    <!--6.世界地图-->
    <WorldMap/>
    <!--7.轮播图-->
    <VueSwiper/>
    <!--8.疫情统计-->
    <CovList ref="covList" :retdata="retdata" names="国内"/>
  </div>
</template>

<script>
//导入api
import api from "../api/index";
import CovInfo from "./CovInfo/CovInfo";
import Covnumber from "./CovInfo/Covnumber";
import Chainmap from "./VueEcharts/Chainmap";
import WorldMap from "./VueEcharts/WorldMap";
import VueSwiper from "./VueSwiper/VueSwiper";
import CovList from "./CovList/CovList";

export default {
  name: 'HomeView',
  components: {CovInfo, Covnumber, Chainmap, WorldMap, VueSwiper, CovList},
  data() {
    return {
      news: [],//新闻信息
      covData: {},//肺炎总信息
      retdata:[]// 各省份肺炎信息
    }
  },
  methods: {
    handleScroll() {
      // covList下城市信息距离Home的距离
      this.covInfotop = this.$refs.covList.$refs.covInfo.offsetTop
      //页面滑动距离
      this.scrolltop = document.documentElement.scrollTop || document.body.scrollTop
      if (this.scrolltop + 1 > this.covInfotop) {
        document.querySelector(".colist").style.display = 'block'
      } else {
        document.querySelector(".colist").style.display = 'none'
      }
    }
  },
  created() {
    //请求病毒信息
    api.getCovInfo().then(res => {
      this.news = res.data.newslist[0].news
      this.covData = res.data.newslist[0].desc
      console.log('国内疫情数据',res.data.newslist[0].desc);
    })
    // 请求各省份信息
    api.getCitycovInfo().then((res) => {
      console.log('城市疫情', res.data);
      this.retdata = res.data.data.list
    });
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll);
  },
//销毁页面距离监听
  destroyed() {
    window.removeEventListener('scroll', this.handleScroll)
  }
}
</script>
<style scoped>
.logo{
  position: relative;
}
.logo .title{
  background: url(../assets/images/head_title.png);
  width: 3.8rem;
  height: 1.3rem;
  background-size: 100% 100%;
  position: absolute;
  top: 1rem;
  left: 0.28rem;
}
.home {
  margin: 0 auto;
}

.list {
  display: flex;
  justify-content: space-around;
  margin-top: 20px;
}

.list img {
  width: 44px;

}

.list .item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.list .item .itemhot {
  width: 20px;
  height: 20px;
  position: absolute;
  top: 3px;
  right: 3px;
  background: url("../assets/images/hot-icon.png") no-repeat 0 0;
  background-size: 100% auto;
}

</style>
